<template>
  <div class="person">
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <button @click="showTel">查看联系方式</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

//这个script专门用来指定组件的名字
<!--<script lang="ts">-->
<!--  export default {-->
<!--    name:'Person',//组件名,用于import时使用-->
<!--  }-->
<!--</script>-->

//setup语法糖
<script lang="ts" setup>
  import {ref} from "vue";
  let name = ref('张三')
  let age = ref(20)
  let Tel = '1829829829'
  function showTel(){
    alert(Tel)
  }
  function changeAge(){
    age.value ++;
    console.log(age.value)
  }
</script>

<style>
  .person{
    background-color: yellow;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>
